<template>
  <view class="search-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        class="search-input" 
        type="text" 
        placeholder="搜索商品" 
        v-model="searchText"
        @confirm="handleSearch"
      />
      <image 
        class="search-icon" 
        :src="getSearchIcon()"
        @click="handleSearch"
      ></image>
    </view>

    <!-- 搜索结果 -->
    <view v-if="searchText" class="search-info">
      <text>搜索 "{{ searchText }}" 的结果</text>
    </view>

    <!-- 热门推荐 -->
    <view class="caption" v-if="goodsList.records.length > 0">
      <text class="text">搜索结果</text>
    </view>
    
    <view class="recommend" v-if="goodsList.records.length > 0">
      <navigator
        class="recommend-item"
        v-for="item in goodsList.records"
        :key="item.id"
        :url="`/pages/goods/goods?id=${item.id}`"
      >
        <image
          class="image"
          mode="aspectFill"
          :src="item.mainImage"
        ></image>
        <view class="name"> {{item.name}} {{item.description}} </view>
        <view class="price">
          <text class="small">¥</text>
          <text>{{ item.basePrice }}</text>
        </view>
      </navigator>
    </view>
    
    <view class="loading-text" v-if="searchText">
      {{finish ? '没有更多啦~' : '正在加载...'}}
    </view>
    
    <!-- 无搜索结果提示 -->
    <view class="no-results" v-if="searchText && goodsList.records.length === 0 && !loading">
      <text>没有找到相关商品</text>
    </view>
    
    <!-- 初始状态提示 -->
    <view class="initial-tip" v-if="!searchText">
      <text>请输入关键词搜索商品</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { searchGoodsAPI } from '@/services/mall'



const searchState = ref('default') // 'default', 'searching', 'searched'

// 根据状态获取对应图标
const getSearchIcon = () => {
  switch (searchState.value) {
    case 'searching':
      return '/static/icon/search/search.png'
    case 'searched':
      return '/static/icon/search/search.png'
    default:
      return '/static/icon/search/default.png'
  }
}

const searchText = ref('')
const finish = ref(false) // 是否加载完成
const loading = ref(false)

const goodsList = ref({
  records: [],
  total: 0
})

const searchParams = ref({
  page: 1,
  pageSize: 10,
   keyword: '' // 对应 ProductSearchDTO 的 keyword 字段
  // 其他字段如 categoryId, description, minPrice, maxPrice, sortBy, sortOrder 可以后续添加

})

// 获取页面参数
onLoad((options) => {
  if (options.keyword) {
    searchText.value = decodeURIComponent(options.keyword)
      searchParams.value.keyword = searchText.value
    performSearch()
  }
})

// 搜索处理函数
const handleSearch = () => {
  if (searchText.value.trim()) {
    // 重置数据
    resetData()
    searchParams.value.keyword = searchText.value.trim()
    performSearch()
  }
}

// 执行搜索
const performSearch = async () => {
  if (!searchText.value.trim() || finish.value) return
  
  loading.value = true
  try {
    // 这里可以添加搜索API，暂时使用商品列表API并模拟搜索
     const params = {
      ...searchParams.value
    }
    
    const res = await searchGoodsAPI(params)
    
    // 数组追加
    goodsList.value.records.push(...res.data.records)
    
    // 判断是否还有下一页
    if (res.data.records.length >= searchParams.value.pageSize) {
      searchParams.value.page++
    } else {
      finish.value = true
    }
  } catch (error) {
    console.error('搜索出错:', error)
    uni.showToast({
      title: '搜索失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 重置数据
const resetData = () => {
  goodsList.value.records = []
  searchParams.value.page = 1
  finish.value = false
}

// 获取更多数据
const getMore = () => {
  performSearch()
}

// 监听搜索词变化
watch(searchText, (newVal) => {
  if (!newVal) {
    resetData()
  }
})

// 下拉刷新
onMounted(() => {
  // 如果有初始搜索词，则执行搜索
  if (searchText.value) {
    performSearch()
  }
})

// 暴露方法给父组件
defineExpose({
  resetData,
  getMore
})
</script>

<style lang="scss">
.search-page {
  background-color: #f4f4f4;
  min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  
  .search-input {
    flex: 1;
    height: 60rpx;
    padding: 0 20rpx;
    background-color: #f4f4f4;
    border-radius: 30rpx;
    font-size: 28rpx;
  }
  
  .icon-search {
    font-family: "iconfont" !important;
    font-size: 32rpx;
    padding: 10rpx 20rpx;
    color: #999;
  }
}

/* 搜索信息 */
.search-info {
  padding: 20rpx 30rpx;
  font-size: 26rpx;
  color: #666;
  background-color: #fff;
}

/* 无结果提示 */
.no-results {
  text-align: center;
  padding: 100rpx 0;
  font-size: 28rpx;
  color: #999;
}

/* 初始提示 */
.initial-tip {
  text-align: center;
  padding: 100rpx 0;
  font-size: 28rpx;
  color: #999;
}

/* 复用 RecommendGoods 的样式 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;
  
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 热门推荐 */
.recommend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  
  .recommend-item {
    width: calc(50% - 10rpx); /* 50%宽度减去间距 */
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box; /* 确保padding包含在宽度内 */
  }
  
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* 添加标准属性 */
    -webkit-box-orient: vertical;
  }
  
  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }
  
  .small {
    font-size: 80%;
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

 .search-icon {
      width: 32rpx;
      height: 32rpx;
      padding: 10rpx 20rpx;
    }
</style>